<template>
  <div id="autoBox" class="box">
    <img class="bg" src="@/assets/bg.png" alt="" />

    <img id="people" class="people" src="@/assets/user.jpg" alt="" />
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      IDs: {
        people: {
          top: null, //具体看初始样式里大概位置
          scrollStart: null, //具体看初始样式里大概位置
          scrollEnd: null,
          scaleStart: null,
          scaleEnd: null,
        },
      },
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
    setTimeout(() => {
      this.create();
    }, 100);
  },
  methods: {
    create() {
      //初始化
      // 小人 #people
      this.IDs.people.top = Number($("#people").css("top").split("px")[0]);
      this.IDs.people.scrollStart = 0.8; //需要计算
      this.IDs.people.scrollEnd = 4; //需要计算
      this.IDs.people.scaleStart = 1; //开始放大/缩小
      this.IDs.people.scaleEnd = 2; //结束放大/缩小
    },
    scroll(e) {
      const scrllTop = e.target.scrollingElement.scrollTop; //实际已滚动高度
      const offsetHeight = document.body.offsetHeight; //实际滚动区域高度

      let scrollTopBL = (scrllTop / offsetHeight) * 100;

      const { people } = this.IDs;
      //  小人 #people
      if (scrollTopBL > people.scrollStart && scrollTopBL < people.scrollEnd) {
        $("#people").css("top", people.top + scrllTop + "px");

        // 往上划
        let scale = (scrollTopBL / people.scaleStart) * people.scrollStart;

        if (scale < people.scaleStart) scale = people.scaleStart;
        if (scale > people.scaleEnd) scale = people.scaleEnd;

        $("#people").css("transform", `scale(${scale})`);
      }
      // 音频切换
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  background-color: #eff0e0;
  position: relative;
  height: 1000rem;

  .bg {
    width: 100%;
  }

  #people {
    position: absolute;
    width: 30rem;
    top: 40rem;
    left: 50%;
    z-index: 1;
    transition: all 0.1s;
  }
}
</style>
